<template>
  <Card>
    <Table border
           :loading="tableLoading"
           :columns="columns"
           :data="alarmList">
    </Table>

    <Modal v-model="addWarningModel"
           title="修改预警"
           :loading="loading"
           :mask-closable="false"
           @on-ok="updateWarning"
           @on-visible-change="onWarningVisible">
      <Form ref="warningForm"
            :model="warning"
            :rules="ruleValidate"
            :label-width="130">
        <FormItem :label="warning.name">
          <Input v-model="warning.value"
                 placeholder="预警"
                 style="width: 200px;"
                 clearable>
          <div slot="append">{{warning.unitName}}</div>
          </Input>
        </FormItem>
        <FormItem label="状态">
          <i-switch size="large"
                    v-model="warning.state">
            <span slot="open">启用</span>
            <span slot="close">禁用</span>
          </i-switch>
        </FormItem>
      </Form>
    </Modal>
  </Card>
</template>
<script>
import { warningFindAll, updateWarning } from '@/api/setting-alarm'
export default {
  data () {
    return {
      // 弹框
      loading: true,
      warningType: 0,
      warning: {},
      ruleValidate: {
        warningDay: [{ required: true, type: 'number', message: '请选择类型', trigger: 'change' }],
        warningType: [
          { required: true, type: 'number', message: '请选择时间', trigger: 'change' }
        ]
      },
      columns: [
        {
          title: '预警类型',
          key: 'name'
        },
        {
          title: '预警单位',
          key: 'value',
          render: (h, params) => {
            const unitName = params.row.unitName
            const value = params.row.value
            return h(
              'span',
              {
              },
              value + unitName + '<'
            )
          }
        },
        {
          title: '状态',
          key: 'state',
          render: (h, params) => {
            return h(
              'span',
              {
              },
              params.row.state ? '开启' : '关闭'
            )
          }
        },
        {
          title: '操作',
          width: 150,
          key: 'action',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {

                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.warning = { ...this.warning, ...params.row }
                    this.onAddShopModal(params.row)
                  }
                }
              }, '修改')
            ])
          }
        }
      ],
      alarmList: [],
      addWarningModel: false,
      cityList: [
        {
          value: 0,
          label: '生日预警'
        },
        {
          value: 1,
          label: '到期预警'
        }
      ],
      timeList: [
        {
          value: 1,
          label: '1天'
        },
        {
          value: 7,
          label: '一周'
        },
        {
          value: 30,
          label: '一个月'
        }
      ],
      // 列表
      tableLoading: false
    }
  },
  created () {
    this.getWarningList()
  },
  methods: {
    onAddShopModal (info) {
      this.addWarningModel = true
      if (info) {
        this.warningType = 1
        this.warning = { ...info }
      } else {
        this.warningType = 0
      }
    },
    getWarningList () {
      this.tableLoading = true
      warningFindAll().then(res => {
        this.alarmList = res.data
        this.tableLoading = false
      }).catch(() => {
        this.tableLoading = false
      })
    },
    onWarningVisible (visible) {
      // 弹框状态改变 清除默认值
      if (visible) return
      this.$refs['warningForm'].resetFields()
    },
    updateWarning () {
      updateWarning(this.warning).then(res => {
        this.$refs['warningForm'].resetFields()
        this.addWarningModel = false
        this.$Message.success('修改成功')
        this.getWarningList()
      })
    }
  }
}
</script>
<style lang="less">
.userAssets {
  position: relative;
  font-size: 16px;
  text-align: center;
  .userAssets-num {
    font-size: 18px;
    font-weight: bold;
  }
}
</style>
